<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>玛菲斯棋珠宝首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_614252_em8gv0wmpp41v2t9.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="indexM">
			<!--头部-->
			<header>
				<div class="menu"><a href="index.html"><i class="iconfont icon-caidan"></i></a></div>
				<div class="search">
					<input type="search" />
					<i class="iconfont icon-fangdajing">搜索</i>
				</div>
			</header>
			<!--主体内容-->
			<section class="main">
				<!--轮播图-->
				<div class="swiper-container slideCon">
					<!--图片区-->
					<ul class="swiper-wrapper slideShow">
						<li class="swiper-slide"><a href=""> 
							<a href=""><img src="img/slide.jpg"/></a>
							<div class="tip"><p>18k 金镶嵌托帕石戒指 镶嵌钻石托帕瑞士蓝女款</p></div>
						</li>
						<li class="swiper-slide"><a href=""> 
							<a href=""><img src="img/slide.jpg"/></a>
							<div class="tip"><p>18k 金镶嵌托帕石戒指 镶嵌钻石托帕瑞士蓝女款</p></div>
						</li>
						<li class="swiper-slide"><a href=""> 
							<a href=""><img src="img/slide.jpg"/></a>
							<div class="tip"><p>18k 金镶嵌托帕石戒指 镶嵌钻石托帕瑞士蓝女款</p></div>
						</li>
					</ul>
					<!-- 如果需要分页器 -->
	    			<div class="swiper-pagination"></div>
				</div>
				<!--产品列表-->
				<ul class="goodsList">
					<li class="goods">
						<div class="goodsImg"><a href="goodsList.html"><img src="img/goods01.jpg"/></a></div>
						<a href="goodsList.html" class="goodsBtn">吊坠系列</a>
					</li>
					<li class="goods">
						<div class="goodsImg"><a href="goodsList.html"><img src="img/goods02.jpg"/></a></div>
						<a href="goodsList.html" class="goodsBtn">戒指系列</a>
					</li>
					<li class="goods">
						<div class="goodsImg"><a href="goodsList.html"><img src="img/goods03.jpg"/></a></div>
						<a href="goodsList.html" class="goodsBtn">耳环系列</a>
					</li>
					<li class="goods">
						<div class="goodsImg"><a href="goodsList.html"><img src="img/goods01.jpg"/></a></div>
						<a href="goodsList.html" class="goodsBtn">吊坠系列</a>
					</li>
				</ul>
			</section>
			<!--底部导航-->
			<footer>
				<ul>
					<li>
						<a href="index.html" class="navImg"><img src="img/home-active.png"/></a>
						<p class="title active"><a href="index.html">首页</a></p>
					</li>
					<li>
						<a href="help.html" class="navImg"><img src="img/help.png"/></a>
						<p class="title"><a href="help.html">帮购</a></p>
					</li>
					<li>
						<a href="shop.html" class="navImg"><img src="img/shop.png"/></a>
						<p class="title"><a href="shop.html">购物车</a></p>
					</li>
					<li>
						<a href="user.html" class="navImg"><img src="img/user.png"/></a>
						<p class="title"><a href="user.html">个人中心</a></p>
					</li>
					
				</ul>
			</footer>
		</div>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var mySwiper = new Swiper(".swiper-container",{
				loop: true,
				autoplay: true,
				// 如果需要分页器
			    pagination: {
			      el: '.swiper-pagination',
			    },
			})
			
		    //鼠标滑过分布器控制swiper切换
			for(i = 0; i < mySwiper.pagination.bullets.length; i++) {
				mySwiper.pagination.bullets[i].index = i+1
				mySwiper.pagination.bullets[i].onmouseover = function() {
					mySwiper.slideTo(this.index);
				};
			}
			document.body.style.height = document.body.clientHeight+"px";
		</script>
	</body>
</html>
